<template>
    <div>
        <el-select v-model="value" filterable placeholder="请选择" style="width: 400px; margin-right: 10px">
            <el-option label="选择需要生成代码的表" value=""></el-option>
            <el-option v-for="item in list" :key="item.name" :label="item.name + ' - ' + item.remark" :value="item.name"> </el-option>
        </el-select>

        <el-button v-if="$Power.PowerAdd(userPower, currentPagePower)" type="primary" v-on:click="onCreate">生成代码</el-button>

        <div style="margin-top: 20px">
            <el-button @click="copyCode1" v-show="activeName == 'a'" class="lbtn1" type="primary">复制代码</el-button>
            <el-button @click="copyCode2" v-show="activeName == 'b'" class="lbtn2" type="primary">复制代码</el-button>
            <el-button @click="copyCode3" v-show="activeName == 'c'" class="lbtn3" type="primary">复制代码</el-button>
        </div>
        <div style="margin-top: 10px">
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane name="a" label="前端VUE代码">
                    <div style="height: calc(100vh - 280px); overflow: auto">
                        <template v-if="code1 == ''"> <el-empty description="空"></el-empty></template>
                        <template v-else>
                            <pre ref="code1">
                                {{ code1 }}
                            </pre>
                        </template>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="b" label="前端接口代码">
                    <div style="height: calc(100vh - 280px); overflow: auto">
                        <template v-if="code2 == ''"> <el-empty description="空"></el-empty></template>
                        <template v-else>
                            <pre ref="code2">
                                {{ code2 }}
                            </pre>
                        </template>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="c" label="后端接口代码(控制器)">
                    <div style="height: calc(100vh - 280px); overflow: auto">
                        <template v-if="code3 == ''"> <el-empty description="空"></el-empty></template>
                        <template v-else>
                            <pre ref="code3">
                                {{ code3 }}
                            </pre>
                        </template>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { GetCodeCreateList, CodeCreate } from "@/service/systemapi";
import Clipboard from "clipboard";
export default {
    name: "codecreate",
    data() {
        return {
            activeName: "a",
            userPower: "",
            currentPagePower: "",
            list: [],
            value: "",
            code1: "",
            code2: "",
            code3: ""
        };
    },
    created() {
        this.currentPagePower = this.$route.query.powercode;
        this.userPower = localStorage.getItem("userPower");
        this.InitData();
    },
    mounted() {
        this.$nextTick(() => {
            new Clipboard(".lbtn1", {
                target: () => this.$refs.code1
            });
            new Clipboard(".lbtn2", {
                target: () => this.$refs.code2
            });
            new Clipboard(".lbtn3", {
                target: () => this.$refs.code3
            });
        });
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        copyCode1() {},
        copyCode2() {},
        copyCode3() {},
        //初始化
        InitData() {
            if (this.$Power.PowerSelect(this.userPower, this.currentPagePower)) {
                this.getList();
            }
        },
        //查询列表
        getList() {
            this.openLoading();
            this.list = [];
            var that = this;

            GetCodeCreateList()
                .then(res => {
                    if (res.data != undefined) {
                        that.list = res.data;
                    }
                    that.closeLoading();
                })
                .catch(err => {
                    this.$message.error("数据请求异常");
                    that.closeLoading();
                });
        },
        //生成代码
        onCreate() {
            if (this.value == "") {
                this.$message.error("请选择需要生成代码的表");

                return false;
            }
            console.log("当前生成代码的表", this.value);

            var that = this;
            that.openLoading();
            CodeCreate(this.value)
                .then(res => {
                    console.log("生成代码", res);
                    that.closeLoading();
                    console.log(res);
                    if (res.success) {
                        that.code1 = res.data.code1;
                        that.code2 = res.data.code2;
                        that.code3 = res.data.code3;
                        that.$message({ message: "生成成功", type: "success" });
                    } else {
                        that.$message.error(res.msg);
                    }
                })
                .catch(err => {
                    that.$message.error("生成失败");
                    that.closeLoading();
                });
        }
    }
};
</script>

<style scoped ang="scss"></style>
